<!-- ----------------------------
--  @author: 野狼上校           --
--  @create: 2024-08-06 08:57  --
--  @version: 1.0              --
-------------------------------->
<!-- 设置资源 -->

<template>
  <!-- 弹出框 -->
  <el-dialog
      :model="dialogSetResourcesVisible"
      title="设置资源"
      width="30%"
      @close="handleClose"
  >
    <el-checkbox-group v-model="checkedResources" @change="handleCheckedChange">
      <el-checkbox v-for="resource in resources" :id="resource.id+''" :key="resource.id" :value="resource.id">
        {{ resource.resourceName }}
      </el-checkbox>
    </el-checkbox-group>

    <!--  按钮  -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onBeforeUpdate, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import {SUCCESS} from "@/utils/constants.ts";
import {RespResult} from "@/api";
import {setResourcesForRole} from "@/api/auth/role.ts";
import {getAllResources} from "@/api/auth/resource.ts";

/*接收父类传过来的值*/
const props = defineProps(["dialogSetResourcesVisible","roleRowInfo"]);

const resources = ref();
const checkedResources = ref();

onBeforeUpdate(()=>{
  //查询所有的资源
  if (props.dialogSetResourcesVisible) {
    getResources();
  }
})


//查询所有的角色
const getResources = () => {
  getAllResources().then(
      (response: RespResult) => {
        if (response.code === SUCCESS) {
          resources.value = JSON.parse(response.data);
        } else {
          ElMessage({
            message: "找不到资源信息",
            type: "error"
          })
        }
      }
  )
}

/*监听弹出框的状态(显示 OR 隐藏)*/
watch(
    () => props.dialogSetResourcesVisible,
    () => {
      if (props.dialogSetResourcesVisible) {
        const resourceIds: any[] = [];
        if(props.roleRowInfo.resources.length > 0){
          props.roleRowInfo.resources.forEach((resource: any) => {
            resourceIds.push(resource.id);
          })
        }
        checkedResources.value = resourceIds;
      }
    });

/*复选框发生变化*/
const handleCheckedChange = (value: string[]) => {
  checkedResources.value = value;
}

/*修改父组件的数据*/
const emits = defineEmits(["update:modelValue", "initRolesData"]);

/*关闭弹出框*/
const handleClose = () => {
  emits("update:modelValue", false);
}

/*确定按钮*/
const handleConfirm = () => {
  //点击行的角色Id
  const roleId = props.roleRowInfo.id;
  //拥有的资源Id
  const resourceIds = checkedResources.value.toString();
  const params = {
    roleId: roleId,
    resourceIds: resourceIds
  }

  setResourcesForRole(params).then(
      (response: RespResult) => {
        if (response.code === SUCCESS) {
          //关闭弹出框
          emits("update:modelValue", false);
          //刷新用户列表
          emits("initRolesData");
        } else {
          //关闭弹出框
          emits("update:modelValue", false);
          ElMessage({
            message: "操作失败",
            type: "error"
          })
        }
      }
  )
}
</script>

<style scoped>

</style>